<!-- 用户列表 -->
<template>
<div class='myadmin-userlist'>
    <top-header></top-header>
    <!-- <div class="userlist-search">
        <el-card>
           <el-row :gutter="20">
               <el-col :span="8">
                    <el-input placeholder="请输入内容" v-model="userListData" clearable @clear="getUserListDate">
                        <el-button slot="append" icon="el-icon-search" @click="getUserListDate"></el-button>
                    </el-input>
               </el-col>
           </el-row>
        </el-card>
    </div> -->
    <div class="userlist-table">
         <el-table :data="userListData" border>
            <!-- 第一种 -->
            <!-- <el-table-column v-for="col in columns"
            :prop="col.id"
            :key="col.id"
            :label="col.label"></el-table-column> -->

            <!-- 第二种 -->
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column prop="registe_time" label="注册时间"></el-table-column>
            <el-table-column prop="username" label="用户姓名"></el-table-column>
            <el-table-column prop="city" label="注册地址"></el-table-column>
         </el-table>

         <el-pagination
            :page-size="pageSize"
            layout="sizes,prev, pager, next,jumper"
            :total="total"
            :page-sizes="[5,10,15]"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page.sync="currentPage">
         </el-pagination>
    </div>
</div>
</template>



<script>
import TopHeader from "./top-header";
import {getUserList} from "@/api/api";
import {getTotalUser} from "@/api/api";

export default {

    components: {
        "top-header":TopHeader
    },

    data() {
        return {
            // 页面表格的数据
            userListData:[],

            // 表格里面列的数据
            columns:[
                {
                    id:'registe_time',
                    label:"注册时间"
                },
                {
                    id:'username',
                    label:"用户姓名"
                },
                {
                    id:'city',
                    label:"注册地址"
                },
            ],

            // 分页
            pageSize:5,//每页的条数
            total:0,//总的注册用户数
            currentPage:1,//默认第一页
        };
    },

    methods: {
        // 点击页码
        handleCurrentChange:function(currentPage){
            console.log(currentPage);
            this.currentPage=currentPage;
            this.getUserListDate({
                pageNum:currentPage
            })
        },
        // 获取用户列表数据
        getUserListDate:async function(params){
            let res=await getUserList({
                limit:this.pageSize,
                offset:(params.pageNum-1)*this.pageSize
            })
            this.userListData=res;
        },
        // 处理页码条数发生变化
        handleSizeChange:function(pageSize){
            this.pageSize=pageSize;
            console.log(pageSize);
            this.currentPage=1;
            this.getUserListDate({
                pageNum:1,
            })
        }
    },

    //生命周期 - 创建完成（可以访问当前this实例）
    async created() {
        this.getUserListDate({
            pageNum:1,
        });
        let res_total=await getTotalUser();
        this.total=res_total.count;
    },
   
}
</script>



<style lang="less" scoped>

</style>